<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="keywords" content="高效学习,记录学习,学习打卡,思维导图" />
		<meta name="description" content="意休，意在通过高效实践来获得更多休息，是一个个人高效学习及前端实践的记录网站。" />
		<title>意休 | 工作</title>
		<link rel="stylesheet" href="css/note.css" type="text/css" />
		<link rel="icon" href="images/baobao.png" type="image/png">
		<link rel="bookmark" href="images/baobao.png" />
		<script src="js/note.js"></script>
		<!-- <meta name="viewport" content="width=750px,initial-scale=1" /> -->
		<!-- ,minimum-scale=1,maximum-scale=1,user-scalable=no -->

	</head>

	<body class="toWork">

		<!--头部区域-->
		<header class="header">
			<div class="hd">
				<h1><a href="./index.html" class="logo">意休</a></h1>
				<div class="sousuokuang">
					<form action="https://www.baidu.com/s" target="_blank" rel="noopener" >
						<input class="kuang" type="text" name="wd" placeholder="搜索技能、应用、话题..." autocomplete="off" />
						<input class="search" type="image" src="images/sousuo.png"  alt="搜索"/>
					</form>
					<span class="tishiwenben">+增加必备关键字 -排除关键字 双引号来限定整词 site intitle inurl filetype</span>
				</div>
				<nav class="nav">
					<ul>
						<li class="daka" onclick="toggleDaka('slideBox')"><a href="javascript:;"><span></span><i>打卡</i></a></li>
						<li><a href="./works.html"><i>Works</i></a></li>
						<li><a href="./share.html"><i>Share</i></a></li>
						<li><a href="./play.html"><i>Play</i></a></li>
					</ul>
				</nav>
			</div>
		</header>
 
		<div class="slideBox">
      <p class="none-txtchosen" onclick="toggleDaka('chart','dayCheck')"><b style="font-size: 32px;">今</b>日<span class="status">未</span>打卡</p>
			<span class="closebtn" onclick="toggleDaka('slideBox')">×</span>
			<ul class="dayCheck">
        <li class="days">已经打卡<span class="dataDays">03</span>天，继续加油哦~</li>
				<li class="firstLine"><input type="text" class="writeIn" placeholder="支持逗号分隔,多项输入" /><span class="addItemBtn none-txtchosen">添加</span></li>
				<li><span>学习项目</span><span>学习天数</span>once a day</li>
			</ul>
			<div class="chart">
				<div class="days">（当数据发生更改时请刷新页面）共<span class="dataDays">03</span>天</div>
				<!-- <span>天数</span>
				<span class="rowtitle">技术点</span>
				<div class="col"></div>
				<div class="row"></div> -->
				<canvas id="myCanvas" width="568px" height="260px"></canvas>
			</div>
		</div>

		<script>
	
			// 页面打卡区域展示实现
			function toggleDaka(objnew,objold=null){
				var oSliBox1 = document.getElementsByClassName(objnew)[0];
				var nowState = oSliBox1.classList.contains("active");		
				
				if(nowState){
					oSliBox1.classList.remove("active");
				}else{
					
					oSliBox1.classList.add("active");
				}
				
				if(objold){
					var oSliBox2 = document.getElementsByClassName(objold)[0];
					var ulState = oSliBox2.classList.contains("active");
					if(ulState){
						oSliBox2.classList.remove("active");
					}else{
						oSliBox2.classList.add("active");
					}
				}
			}
			
		</script>

		<div class="taskForWork">
			<h1>好的开始就成功了一大半</h1>
			<a class="pinkbtn" href="./mind.html" target="_blank" rel="noopener" >使用思维导图</a>
			<section class="textTips">
				<div>准备物资和环境：水 ，零食，梳子。</div>
				<div>打起精神状态：适合地做下准备运动，调整呼吸。</div>
				<div>明确目标：由什么得什么，用什么技术或工具，最优解是什么。</div>
				<div>提示：学习没必要全部都学，学适合自己学习的，学自己需要的。</div>
				<div>最后，要不要来点音乐？
					<a href="https://www.kugou.com/yy/special/single/1513086.html" target="_blank" rel="noopener" > 《悠闲》 </a>
					<a href="https://www.kugou.com/yy/special/single/1514174.html" target="_blank" rel="noopener" > 《触动》 </a>
					<a href="https://www.kugou.com/yy/special/single/1383070.html" target="_blank" rel="noopener" > 《犯傻》 </a>
					<a href="https://www.kugou.com/yy/special/single/3352777.html" target="_blank" rel="noopener" > 《恋之歌》 </a>
					<a href="./heal.html" target="_blank" rel="noopener" > （困惑入口）</a>
          
				</div>
			</section>

			<section class="mianContent">
				<div class="analyseBtn none-txtchosen" accesskey="s" title="快捷键 Alt+S">析</div>
				<form autocomplete="off">
					<div class="taskContent">
						<div class="scrollbar">
							<div class="scrollmove"></div>
						</div>
						<div class="startBtn none-txtchosen">开始计时</div>
						<!-- <p>（Tab键可以快速跳到下一个输入框）</p> -->

						<div class="taskType">
							<b>做事的类型：</b>
							<label><input type="checkbox" name="thingsType" value="旧领域" /><span class="cbox"></span>旧领域</label>
							<label><input type="checkbox" name="thingsType" value="新领域" /><span class="cbox"></span>新领域</label>
							<label><input type="checkbox" name="thingsType" value="做项目" /><span class="cbox"></span>项目</label>
							<label><input type="checkbox" name="thingsType" value="教学" /><span class="cbox"></span>教学</label>
							<label><input type="checkbox" name="thingsType" value="学习" /><span class="cbox"></span>学习</label>
							<label><input type="checkbox" name="thingsType" value="整理" /><span class="cbox"></span>整理</label>
							<label><input type="checkbox" name="thingsType" value="复习" /><span class="cbox"></span>复习</label>
						</div>
						<div class="taskSkill">
							<b>可用的方法：</b>
							<label><input type="checkbox" name="vaSkills" value="搜索" /><span class="cbox"></span>搜索</label>
							<label><input type="checkbox" name="vaSkills" value="视频" /><span class="cbox"></span>视频</label>
							<label><input type="checkbox" name="vaSkills" value="实战" /><span class="cbox"></span>实战</label>
							<label><input type="checkbox" name="vaSkills" value="导图" /><span class="cbox"></span>导图</label>
							<label><input type="checkbox" name="vaSkills" value="试错" /><span class="cbox"></span>试错</label>
							<label><input type="checkbox" name="vaSkills" value="讨论" /><span class="cbox"></span>讨论</label>
							<label><input type="checkbox" name="vaSkills" value="故事" /><span class="cbox"></span>故事</label>
						</div>

						<div class="singleLine">
							<div>
								<b>主要任务： </b><input class="oData" id="taskAGoal" type="text"  placeholder="主要任务-输入内容可设为默认"/>
								<em>一天总任务是什么呢</em>
								<span class="updownbtn" onclick="autoContent(this, 'default')">设</span>
							</div>
							<div><b>优先解决：</b><input class="oData" id="taskGoal" type="text"  placeholder="优先解决-可上下切换执行清单的数据" /><em>具体、现在就能做的</em>
                <span class="updownbtn" onclick="autoContent(this, 'up')">上</span>
                <span class="updownbtn" onclick="autoContent(this, 'down')">下</span>
              </div>
							<div><b>计划用时：</b><input class="oData" id="taskPTime" type="number"  min="3" placeholder="计划用时-单位分钟"/>
              <span class="updownbtn" onclick="addTime('8')">8</span>
              <span class="updownbtn" onclick="addTime('15')">15</span>
                <span class="updownbtn" onclick="addTime('20')">20</span>
                <span class="updownbtn" onclick="addTime('30')">30</span>
                <span class="updownbtn" onclick="addTime('45')">45</span>
                <span class="updownbtn" onclick="addTime('60')">60</span>
              </div>
							<div><b>自估难度：</b><input class="oData" id="taskLevel" type="number" max="5" min="1" placeholder="自估难度-1~5" />
                <span class="starbtn"></span>
                <span class="starbtn"></span>
                <span class="starbtn"></span>
                <span class="starbtn"></span>
                <span class="starbtn"></span>
              </div>
							<div><b>开始时间：</b><input class="oData" id="taskSFTime" type="text" placeholder="开始时间-格式10:20" />
                <em>now or never</em>
                <span class="updownbtn" onclick="addPresentTime()">get</span>
              </div>
							<div><b>实际用时：</b><input class="oData" id="taskFTime" type="number" min="1"  placeholder="实际用时-单位分钟"/>
                <em> Let it be</em>
                <span class="updownbtn" onclick="getWorkTime()">算</span>
              </div>
							<div>
                <b>完成度：</b><input class="oData" id="taskFStatus" type="text" disabled/ placeholder="实际用时/计划用时(按'算'获取)">
                <span class="updownbtn" onclick="getWorkProccess()">算</span>
              </div>
							<div><b>困难或障碍在哪里：</b><input class="oData" id="taskDifficult" type="text" placeholder="如果有难度,难在哪里？" /><em>What happened?</em></div>
							<div><b>接下来？</b><input class="oData" id="taskContinue" type="text" placeholder="接下来的打算,怎么处理或避免？"/><em>Accept it, 办法总比困难多</em></div>
							<div><b>生成的文本：</b><br /><textarea id="allTaskData" placeholder="(实践过程生成区域,可写入记录中并分析)"></textarea></div>
							<div class="btnLine">
								<div class="dataSTNoteBtn">生成</div>
								<div class="dataSTNoteBtn">写入</div>
								<span id="tips">(提示：内容先生成后写入)</span>
							</div>
						</div>
					</div>
				</form>
			</section>
		</div>
		<script>
			// 页面计时代码
			var oStart = document.getElementsByClassName("startBtn")[0];
			var oScr =  document.getElementsByClassName("scrollmove")[0];
			oStart.onclick = function(){
				oScr.style.animationName = "resetScroll";
				oScr.style.animationPlayState = "paused";
				document.querySelector(".startBtn").innerHTML = "开始计时：<span>0</span>分<span>0</span>秒";
				clearInterval(t);
				var time = -1;
				var oPlanTime = document.getElementsByClassName("oData")[2];
				var planTime = oPlanTime.value*60 || 1800;
				var oTime = document.querySelectorAll(".startBtn span");
				setTimeout(function(){
					oScr.style.animationName = "scrollTo";
					oScr.style.animationPlayState = "running";
					oScr.style.animationTimingFunction = "steps("+planTime+") ";
					oScr.style.animationDuration = planTime+"s ";
				},1000)
				
				var t = setInterval(function(){
					time++;
					var m = Math.floor(time/60);
					var s = time%60;
					oTime[0].innerText = m;
					oTime[1].innerText = s;
					// console.log(m,s);
					if(time>(planTime+29)){ // 加29表示，超时30秒后会停止计时
						clearInterval(t);
					}
				},1000);
			}
			var timeCount = {
        startMin:0,
        endMin:0
      };
      var keyindex = 0;
      var taskInput = document.getElementById("taskGoal");
      var taskPTime = document.getElementById('taskPTime');
      var taskLevel = document.getElementById('taskLevel');
      var taskSFTime = document.getElementById('taskSFTime');
      var taskFTime = document.getElementById('taskFTime');
      var taskFStatus = document.getElementById('taskFStatus');
      
      
      function autoContent(ele, mode){
        if(localStorage){
					var assignment = document.getElementById("taskAGoal");
					if(mode === "default" && assignment.value){
						localStorage.setItem('defaultTask',assignment.value.trim());
						// console.log("设置成功，",assignment.value.trim());
					}else if(mode === "down" || mode === "up"){
						const liststr = localStorage.getItem('dolist');
						if(/\*+/.test(liststr)){
						   ele.classList.remove('hidden');
						   const list = liststr.split('*');
						   if(mode==='up'&&keyindex>0){
						     keyindex--;
						   }else if(mode==='down'&&keyindex<list.length-1){
						     keyindex++;
						   }
						   taskInput.value = list[keyindex];
						}else if(liststr){
						  ele.classList.remove('hidden');
						  taskInput.value = liststr;
						}else{
						   ele.classList.add('hidden');
						}
					}
        }else{
          ele.classList.add('hidden');
          console.log('该浏览器版本并不支持localStorage，请更新最新版本或换浏览器。');
        }
      }
      function addTime(time){
        taskPTime.value = time;
      }
      
      
      // 侦听事件  鼠标滑过，添加class 滑过startouchbtn 点击active
      var stars = document.getElementsByClassName("starbtn");
      var starLength = stars.length;
      function toDegree(touchbtn){
        for(let u = 0; u < starLength; u++){
          if( touchbtn < u ){
            stars[u].classList.remove("active");
          }else{
            stars[u].classList.add("active");
          }
        }
      }
      taskLevel.onchange = function () {
        if (taskLevel.value) {
          var degree = taskLevel.value;
          var deg = degree*1-1; 
          toDegree(deg);
        }
      }
      for(let touchbtn = 0; touchbtn < 5; touchbtn++){
        stars[touchbtn].onmouseenter = function() {
          for(let u = 0; u < 5; u++){
            if( u <= touchbtn ){
              stars[u].classList.add("startouchbtn");
            }
          }
          
        }
        stars[touchbtn].onmouseleave = function() {
          for(let u = 0; u < 5; u++){
            stars[u].classList.remove("startouchbtn");
          }
        }
        stars[touchbtn].onclick  = function () {
          taskLevel.value = touchbtn + 1;
          toDegree(touchbtn);
        }
      }
      
      function addPresentTime(){
        var date = new Date();
        var nowTime = date.getHours()+':'+date.getMinutes();
        taskSFTime.value = nowTime;
        timeCount.startMin = date.getTime()/60000;
      }
      function getWorkTime(){
				var val = 1;  // 最终显示值
				var date = new Date();
				var finalTime = date.getHours()*60 + date.getMinutes();
				if(taskSFTime.value.trim()){
					var startimeStr = taskSFTime.value.trim();
					var startime = 0;
					// 判断输入时间是否正确
					var hour = /[0-9]+\:/.exec(startimeStr);
					var min = /\:[0-9]+/.exec(startimeStr);
					// console.log(hour);
					if(hour && hour[0].slice(0,-1)*1<24){
						startime = (hour[0].slice(0,-1)*1)*60;
						// console.log("hour 成功",startime);
					}
					if(min && min[0].substring(1)*1<60){
						startime += min[0].substring(1)*1;
						// console.log("min 成功",startime);
					}
					if(finalTime >= startime){
						val = Math.ceil(finalTime-startime);
					}else{
						val = Math.ceil(1440-finalTime+startime);
					}
					// console.log("不是计算出来的起始时间",startime,val);
				}else{
					timeCount.endMin = date.getTime()/60000;
					if(timeCount.startMin>0){
					  val = Math.ceil(timeCount.endMin - timeCount.startMin);
					}
				}
        taskFTime.value = val;
      }
      function getWorkProccess(){
        var a = taskPTime.value;
        var b = taskFTime.value;
        if(a*1>0 && b*1>0){
          var percent = Math.round(a / b * 100) ;
          taskFStatus.value = percent+"%";
        }
      }
		</script>


		<!-- 弹框内容 -->
		<section class="layout">
			<div class="winBack" accesskey="esc">（ 点击透明区域即可关闭 ）</div>
			<div class="newWin">
				<!-- 弹框区域一、统筹区 -->
				<section class="setThings">
					<div>郑重说明：本清单的理论知识来自Topbook <a href="https://topbook.cc/course/detail/153" target="_blank" rel="noopener" >《重新认识GTD》</a>系列文</div>
					<div class="doList">
						<div class="btnClose none-txtchosen">收起</div>
						<section class="main">
							<div class="head">
								<h1>执行清单 <span class="getBtn btn">get</span> </h1>
								<input type="text" class="smInput" autoFocus />
								<button>添加</button>
								<button>批量</button>
								<textarea class="textarea" placeholder="[提示] 批量导入时,事项之间用*隔开,点击添加即可批量导入"></textarea>
							</div>
							<p class="wrongTip">(每天进步一点点，可按enter键添加)</p>
							<ul class="todoList">
								<div class="lists"></div>
								<div class="tips">
									<span>共&nbsp;<b>0</b>&nbsp;项 </span>
									<button>清空</button>
									<button>收集</button>
								</div>
							</ul>
							<nav class="doListNav">
								<div class="left">
									<div class="btn">技术醒脑</div>
									<div class="btn">每日回顾</div>
									<div class="btn">每周回顾</div>
								</div>

								<div class="right">
									<div class="btn">事件统筹</div>
									<div class="btn">执行提示</div>
									<div class="btn">项目卡片</div>
								</div>
							</nav>
						</section>

						<section class="aside">
							<div class="allparts">
								<!-- 栏目：技术醒脑 -->
								<div class="knowing part">
									<h4>GTD：for把事情处理完/做好，not把事情做完</h4>
									<p>需要达到的目的：</p>
									<p class="indent">a.记录下来，让大脑清空不混乱。</p>
									<p class="indent">b.让自己随时都能明确知道，下一步该做什么。</p>

									<p>除机心（这里机心指机巧功利之心）：人类的聪明在于会工具，容易犯的错误是只会工具。别让工具玩了你。做计划是为了更好的实际效果，带有强目的性，不是为了计划而计划，是为了做事！</p>
									<p>不去想做什么，该想不做什么。不要老想着做事情，而是享受自己的存在。</p>
									<p>权衡利害关系。重点不一定是我得到了什么，因为得到什么有时候反而是非常明显的。更可能是因为会失去什么？我能否承受这种失去？比如纪念日？某个自己独处思考的时间？</p>
									<p>做方案“如何做思维导图公开课”：比如，确定一个选题范围，是技能型为主，还是做一些心法？在这种选题范围内，大致涵盖哪些要点？去哪些地方搜集辅助资料？大概花多久时间写出脚本？多久时间制作完成……</p>
									<p>思考：比如，为什么不能完成所有的事情？那些做成事儿的人难道不都是能够严谨、努力要求自己今日事今日毕的吗？做距离自己目标更近的事情，那么我的目标是什么？应该怎么确定自己的目标呢？</p>
									<p>联系：一个小小的任务清单，最终牵扯出来的，仍然可能和个人目标、处事方式有重要的关联。因为只要你愿意多问自己问题，你就能牵扯出一张网，这张网就是很多人说的——体系。</p>
									<p>如果一个普通人需要处理的事情多到无法处理，是否应该反思下，是不是要得太多了？</p>
									<p class="indent">①如果你确实不知道自己该做什么，不如先问问自己不能做什么（这是一位老先生的话）；</p>
									<p class="indent">② 依然把需要做的事情按照目标权重排序，然后有时间就做距离目标比较近的事情，做不完没关系，反正你也做不完所有事情；</p>
									<p class="indent">③把所有需要做的事情做一个价值排序之后，只取排行榜上前面十件甚至五件，后面不管是什么，都不要再去管它们，时间会让你知道，不管你做没做其他事情，地球照样运转。</p>
								</div>


								<!-- 栏目：每日回顾 -->
								<div class="part">
									<h4>day回顾：起始 or 终结</h4>
									<p>收集箱：清空了？（2分钟的立刻做等等五步走），还有其他一些事项被遗忘，没有放进收集箱吗？处理好。</p>
									<p>等待清单：下一步是什么？主动拿结果，并且确保事情顺利被完成。</p>
									<p>项目清单：下一步是什么？正在做吗？做得怎么样了？（没做的--安排，把下一步并放进执行清单；在做的，看它的完成度如何）</p>
									<p>可能清单：要自己主动去思考，这件事可行性有多大。把思考这件事，也放进执行清单。</p>
									<p class="indent">比如，学习编程是可能清单中的事情。那么 在执行清单中把考虑学习编程这件事也放进去。思考为什么学？什么时候学？怎么学？是否影响正常的目标和生活？</p>
								</div>

								<!-- 栏目：每周回顾 -->
								<div class="part">
									<h4>week回顾：更想要 更喜欢 更应该</h4>
									<p>目的：查漏补缺 + 检查科学性（私人订制）</p>
									<p>注意点：</p>
									<p class="indent">①从收集箱出去的项目永远不要再放回收集箱；</p>
									<p class="indent">②项目清单中的事项需要你主动将其拆解，并为其谋划执行方案，把大项目拆解成小步骤，并分解到其他清单当中。记住 GTD 的第二大目的，随时随地都明确地知道，下一步应该做什么；</p>
									<p class="indent">③要特别保障等待清单、可能清单、回收箱三个分区当中的回顾，主动确定等待清单是否被完成、回收箱和可能清单中的事项是否有变动（变成可执行或其他）；</p>
									<p class="indent">④日历或提醒事项应用中的提醒是否恰当，比如下个月末要完成论文是 Deadline，但是否应该这个月就提醒自己，并且分解开来？</p>
									<p class="indent">⑤为第四步腾出专门的时间，比如每天、每三天或每周、每月。</p>
									<p>检查清单</p>
								</div>

								<!-- 栏目：事件统筹 -->
								<div class="collect part">
									<h4>事件统筹：让精力集中在想要的方向上</h4>
									<div class="indent">五步：收集/主动捕获--明晰/强调结果--组织--计划的同时更强调回顾--执行更强调与执行对象的联系（人性化-拿结果）[注意：2分钟可以搞定的请立刻做，不需要安排进来。]</div>
									<div class="thing">(数据未加载)</div>
									<div class="resultTip">(处理结果显示区)</div>
									<div>
										<p>问题一：可行动吗？（若不可，请选择）</p>
										<label><input type="radio" name="belong" value="4" />可能清单</label>
										<label><input type="radio" name="belong" value="5" />参考资料</label>
										<label><input type="radio" name="belong" value="6" />回收箱</label>
										<p>问题二：能一步搞定吗？（若不可，请选择）</p>
										<label><input type="radio" name="belong" value="3" />项目清单(下一步的计划和安排是？)</label>
										<p>问题三：该我做吗？（若不是，请选择）</p>
										<label><input type="radio" name="belong" value="2" />等待清单</label>
										<div>———标明事项，时限，可能的执行事项，特定时机确认。分析可能情况，主动拿结果，尽量确保这件事能够被顺利完成，配合闹钟使用。</div>
										<p>问题四：特定时间？（调闹钟或写进日历）</p>
										<label><input type="radio" name="belong" value="1" />日历事项</label>
										<input type="date" placeholder="执行的日期是？" />
										<label><input type="radio" name="belong" value="0" />执行清单</label>
									</div>
									<div class="line"></div>
									<button class="solved">处理完毕，开始下一条</button>
									<button class="solved">跳过</button>
									<!-- <button class="solved">显示目前数据</button> -->
								</div>


								<!-- 栏目：执行提示 -->
								<div class="part">
									<h4>执行提示：万事开头难，害怕解决不了问题</h4>
									<p>做事前提：保障自己有充足的睡眠、健康的身体，而且不能牺牲合理的人际关系、个人幸福感。</p>
									<p>切记：量力而为——你不可能完成所有的事情 ，尽可能做离你目标更近的事情。</p>
									<p>注意点：</p>
									<p class="indent">①能被放进执行清单的，都是可以一步搞定的。若不是因为自己态度和能力有问题，而是因为事件特殊用时较长，得知道“事情头疼并非因为它难，因为我们很少接触，误以为难”。</p>
									<p class="indent">②做计划、做方案是每个人的必修课。它不是说，你一开始就得做出多么好的方案，而是你在有这种意识的情况下，愿意去做，并且一次比一次有哪怕一点小小的进步。</p>
									<p class="indent">③时间矛盾上，做好时间预估，为特别的事件预留时间，可以变通，找别人帮忙。</p>
									<p class="indent">④放入回收箱的原因有事件本身会变化或一些事真的没必要做。放入可能清单的事短期不变，当下一般不会有变动，没有确定、没有计划。当时机成熟，可能的事情变成可以的时候，你要专门为它做计划。</p>
									<p class="indent">⑤参考资料：一切可被记录的，就一定可供参考，但参考价值的高低是相对的。回归常识，避免追新、奇、怪；提高信息的检索、辨别能力；提高参考资料的存档标准。</p>
									<p>人找书很难，但书找书却很容易。
										提高检索能力，多检索，多辨别，多思考，且不要忘了回归常识，那些检索方法也要学，并且学会辨别好坏。搜索引擎能够找到的，对你来说浅显而平常的知识，一些新概念，但旧瓶装新酒、换汤不换药的，不用专门存档。</p>
									<p>高效：一次只处理一件事情，定时，打破负罪感幻觉 </p>
									<p>其他方法：要事第一 四象限法则</p>
								</div>

								<!-- 栏目：项目卡片 -->
								<div class="cards part">
									<button class="bigger left">deleteAll</button>
									<button class="bigger">more</button>
									<nav>
										<button class="slide">执行</button>
										<button class="slide">日历</button>
										<button class="slide">等待</button>
										<button class="slide">项目</button>
										<button class="slide">可能</button>
										<button class="slide">资料</button>
										<button class="slide">回收</button>
									</nav>
									<ul class="listContent">
										<li>操作说明:</li>
										<li>(1)此处只作展示，点击“more”按钮进入大视图来修改。</li>
										<li>(2)“deleteAll”按钮删除的是所有数据，请慎重选择。</li>
                    <li>执行清单--focus on one thing</li>
                    <li>日历事项--调好闹钟</li>
                    <li>等待清单--主动去拿结果</li>
                    <li>项目清单--项目太大，分解成可实现的任务吧</li>
                    <li>可能清单--现在时机成熟了吗？</li>
                    <li>参考资料--能找到的不存，有价值或稀罕的存</li>
                    <li>回收箱--有些事还真的不是事</li>
									</ul>
								</div>
								
							</div>
						</section>
					</div>

				</section>
				<!-- 弹框区域二、讨论区 -->
				<div class="discussArea">

					<!--1. 输入问题  disabled="disabled" -->
					<form class="inputBox" action="https://www.zhihu.com/search">
						<textarea id="disWords" placeholder="想要问什么……"  name="q"></textarea>
						<button id="disSearchBtn" class="btn_box" type="submit"> 知乎中查找答案</button>
						<button id="disNoteBtn" class="btn_box" type="button">做笔记</button>
						<button id="disSubmitBtn" class="btn_box" type="button">提问</button>
						<input id="reSetBtn" class="btn_box" type="reset" value="清空" />
						<button id="hotLinkBtn" class="btn_box" type="button">加热链</button>
						<button id="turnNoteBtn" class="btn_box" type="button">转到笔记区 (W)</button>
						<span class="wordsCanIn">还可以输入200字</span>
					</form>
					<!--2.关键字搜索 -->
					<div class="hotSearch">
						<span>热链：
							<a href='http://wolai.ooo' target='_blank' rel='noopener' >日记</a>
							<a href='https://www.yuque.com/nibaobao-youho/note/plan' target='_blank' rel='noopener' >计划</a>
							<a href='https://www.yuque.com/nibaobao-youho/note/draft' target='_blank' rel='noopener' >写草稿</a>
							<a href='https://www.yuque.com/nibaobao-youho/frontend' target='_blank' rel='noopener' >前端知识</a>
							<a href='https://www.yuque.com/nibaobao-youho/frontend/learn' target='_blank' rel='noopener' >学习方法</a>
						</span>
						<span class="customizeLink">（自定义热链区）</span>
					</div>
					<!--3. 已有问题 -->
					<div class="discussBox">
						<ul id="existList"> </ul>
            <hr class="endLine" />
					</div>
				</div>

				<!-- 弹框区域三、笔记区域-->
				<div class="noteArea">
					<!--1. 输入笔记 -->
					<div class="inputBox">
						<form>
							<textarea id="noteWords" placeholder="实践过程小本本:记想法/记关键/记笔记(易错，不会但又有用的知识或经验)"></textarea>
							<input type="reset" class="btn_box" name="reset" value="清空" />
							<button id="addNoteBtn" class="btn_box" type="button">添加</button>
							<button id="addLinkBtn" class="btn_box" type="button">加链接</button>
							<button id="saveNoteBtn" class="btn_box" type="button">保存当前修改</button>
							<input id="outputNotes" class="btn_box" value="导出" type="button">
							<button id="clearNoteBtn" class="btn_box" type="button">清空所有</button>
							<input id="turnDisBtn" class="btn_box" value="转到评论区 (T)" type="button">
						</form>
						<div id="tipsOfChange">提示：单项笔记的修改和删除，还需要点击“保存当前修改”哦~</div>
					</div>

					<!--2. 已有笔记 -->
					<ul id="existNoteList"></ul>
				</div>

				<!-- 弹框区域四、分析殿 -->
				<div class="analyseArea">
					<a href="./download.html" class="downloadbtn">处理/下载页面</a>
					<ul class="analyseContent"></ul>
				</div>
			</div>
		</section>

		<!-- 弹框区内容 卡片-->
		<section class="allCards">
			<div class="menu">
				<nav></nav>
			</div>

			<div class="maincards">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</section>

		<!-- 左侧固定操作按钮 -->
		<section>
			<div class="toFixed">
				<span class="ybtn_box none-txtchosen" id="nBtnSetThings"  title="事件处理指示">统筹</span>
				<span class="ybtn_box none-txtchosen" id="nBtnAsk" onclick="toreviewPage()"  title="进入事件复盘页面">处理</span>
				<span class="ybtn_box none-txtchosen" id="nBtnDiscuss" accesskey="t"  title="快捷键 Alt+T">评论</span>
				<span class="ybtn_box none-txtchosen" id="nBtnNote" accesskey="w" title="快捷键 Alt+W">本子</span>
			</div>
		</section>
    <script>
			function toreviewPage () {
				window.open("./toreview.html");
			}
		</script>
    <footer class="footer">
    	&nbsp;<h1>意休，让生活更高效一点</h1>&nbsp;&nbsp;&nbsp;&nbsp;<a href="./about.html" target="_blank" rel="noopener" >关于我 | 网站帮助</a>
    </footer>

		<script>
			// 统筹的实现
			const doListState = {
				val: '',
				vals: '',
				list: [],
				show: 3,
				inshow: 0,
				index: -1,
				sortList: [[],[],[],[],[],[],[]],
				txtVal: '',
				continueSort: true,
				isSolvedAll: 0,
				newListStr: "",
				firstSave: -1,
			}
			initial();

			const slides = document.querySelectorAll(".slide");

			function initial() {
				const getBtn = document.getElementsByClassName("getBtn")[0];
				getBtn.onclick = function() {
					const ul = document.getElementsByClassName("todoList")[0];
					ul.classList.add("card");
					const tipBtn = document.getElementsByClassName("tips")[0];
					tipBtn.style.display = "block";
					const list = doListState.sortList[0];
					doListState.list = list;
					showListData(list, 1);
					const num = document.querySelector(".tips b");
					num.innerText = list.length; // 显示当前的项目数
					const tip = document.getElementsByClassName("wrongTip")[0];
					tip.innerText = "(目前状态：数据来自执行清单)";
				}



				const bbtns = document.getElementsByClassName("bigger");
				bbtns[0].onclick = function() {
					let val = prompt("确定删除所有数据吗？该操作无法挽回。\n若确定销毁，请输入密码123456");
					if (val === "123456") {
						clearData();
						window.location.href = "./towork.html";
						alert("删除成功。");
					} else {
						alert("密码错误，删除失败。");
					}
				}
				bbtns[1].onclick = function() {
					window.open("./toreview.html");
				}

				const nextBtn = document.getElementsByClassName("solved");
				nextBtn[0].onclick = solvedBox;
				nextBtn[1].onclick = function() { // 跳过
					localStorage.setItem("collectIndex", doListState.index); // 索引值的保存，初次保存的是-1
					const tip = document.querySelector(".resultTip");
					if (doListState.txtVal !== "") {
						tip.innerText = "（跳过成功!）";
					} else {
						tip.innerText = "（操作失败，没有数据，无法跳过。）";
					}
					readBox();
					localStorage.setItem("collectIndex", doListState.index);
				};
				// nextBtn[2].onclick = function(){ //显示数据
				// 	console.log("index： "+doListState.index+";       continueSort： "+doListState.continueSort+";     isSolvedAll： "+doListState.isSolvedAll);
				// 	console.log(doListState.sortList);
				// }

				const pagebtns = document.querySelectorAll(".doListNav .btn");
				const cards = document.querySelectorAll(".part");
				getChannel(pagebtns, cards);
				getChannel();

				const tbtns = document.querySelectorAll(".tips button");
				tbtns[0].onclick = function() { // 全部删除
					const ul = document.getElementsByClassName("todoList")[0];
					ul.classList.remove("card");
					doListState.list = [];
					const tip = document.getElementsByClassName("tips")[0];
					tip.style.display = "none";
					const lists = document.getElementsByClassName("lists")[0];
					lists.innerText = "";
				}

				tbtns[1].onclick = saveIn;
				const btns = document.querySelectorAll(".head button");

				btns[0].onclick = handleAdd;
				btns[1].onclick = function(event) { // 根据文字切换大框的隐藏情况
					const tNode = document.querySelector(".textarea");
					if (event.target.innerText === "批量") {
						event.target.innerText = "收起";
						tNode.style.display = "block";
					} else {
						event.target.innerText = "批量";
						tNode.style.display = "none";
					}
				};

				const inputSm = document.getElementsByClassName("smInput")[0];
				const textarea = document.getElementsByClassName("textarea")[0];

				inputSm.addEventListener("change", handleInput, false);
				inputSm.addEventListener("keyup", handleEnter, false);
				textarea.addEventListener("change", handleInput, false);

				const btnClose = document.getElementsByClassName("btnClose")[0];
				btnClose.onclick = function() {
					const boxHead = document.getElementsByClassName("head")[0];
					const boxList = document.getElementsByClassName("todoList")[0];
					const mainBox = document.getElementsByClassName("main")[0];
					const asideBox = document.getElementsByClassName("aside")[0];
					// 
					if (btnClose.innerText === "收起") {
						// 得到1，表示没有收起，应该收起
						boxHead.style.display = "none";
						boxList.style.display = "none";
						mainBox.style.minHeight = "40px";
						asideBox.classList.add("closeState");
						asideBox.classList.remove("openState");
						btnClose.innerText = "显示";

					} else {
						boxHead.style.display = "block";
						boxList.style.display = "block";
						mainBox.style.minHeight = "240px";
						asideBox.classList.add("openState");
						asideBox.classList.remove("closeState");
						btnClose.innerText = "收起";
					}
				}

				readSortBox();
				readBox();
			}

			function readIndex() { // 获取内存中上次保存的索引
				if (localStorage.getItem("collectIndex")) { // 刚刷新网页或每次保存之后都执行
					doListState.index = localStorage.getItem("collectIndex") * 1; // 第一次保存之后是0 。易出错点：这里获取到的是字符串！
					// console.log("readIndex【此时内存中的index为】" + doListState.index);
				}
				if (localStorage.getItem("solvedAll")) {
					doListState.isSolvedAll = localStorage.getItem("solvedAll") * 1;
				}
				if (localStorage.getItem("notFirstSave")) { // 判断是不是第一次收集
					doListState.firstSave = 0;
				} else {
					doListState.firstSave = 1;
				}
			}

			function readBox() { // 功能：获取一下内存索引，负责获取下一项索引，获取当前收集箱
				readIndex();
				let index = doListState.index + 1; // 已有的index
				let solvedAll = doListState.isSolvedAll;
				const pageDealWith = document.querySelectorAll(".doListNav .btn")[3];
				if (solvedAll === 0) {
					pageDealWith.classList.add("news");
					pageDealWith.innerText = "需要处理";
				} else {
					pageDealWith.classList.remove("news");
					pageDealWith.innerText = "事件统筹";
				}

				const showThing = document.getElementsByClassName("thing")[0];
				if (localStorage.getItem("collectBox")) {
					let listStr = localStorage.getItem("collectBox");
					let list = [];
					if (/\$+/.test(listStr)) {
						list = listStr.split("$");
					} else {
						list[0] = listStr;
					}
					if (index < list.length) {
						// console.log("readbox执行了显示文本，当前收集箱数据：" + list + "数组长度：" + list.length + "索引：" + index);
						let item = list[index];
						showThing.innerText = item; // 显示是没问题的
						doListState.txtVal = item;
						doListState.index = index; //这个index是用来记录当前处理到哪项的
					} else {
						showThing.innerText = "（提示：已全部处理完毕，没有下一条了）";
						doListState.txtVal = "";
						doListState.continueSort = false;
						doListState.isSolvedAll = 1;
						// localStorage.setItem("collectBoxNew","null"); // 
						localStorage.setItem("solvedAll", "1");
					}
				} else if (localStorage) {
					showThing.innerText = "（提示：目前没有数据，请添加事项并存库）";
				} else {
					showThing.innerText = "（提示：该浏览器不支持本功能，请更新至浏览器最新版本或更换浏览器打开）";
				}

			}

			function readSortBox() { // 初始化或每次处理数据都执行
				if (localStorage.getItem("collectSortBox")) {
					let sortListStr = localStorage.getItem("collectSortBox");
					// console.log("getitem得到的sortlist是"+sortListStr);
					let slist = sortListStr.split("~"); //含有7项数组 25$1~~~~~~
					let sortList = [];
					for (let y = 0; y < slist.length; y++) {
						let sortListOne = [];
						let slistOneStr = slist[y]; // 获取了分类--每一项的字符串（有可能有2项，有可能只有1项或者是0项）
						if (/\$+/.test(slistOneStr)) {
							sortList[y] = slistOneStr.split("$"); 
              // 请不要这样写 sortListOne = slistOneStr.split("$"); sortList[y] = sortListOne; （循环过程中会受下面sortListOne[0]赋值的影响）
						} else if(slistOneStr.trim()){
							sortListOne[0] = slistOneStr.trim(); // 易错，这里必须保证sortList里面push的是数组
							sortList[y] = sortListOne;
						}else{
              sortList[y] = [];
            }
						// console.log("【每次处理一个分类时】此时的sortlist是"+sortList);
					}
          // console.log('readSortBox函数执行的结果',sortList);
					doListState.sortList = sortList;
					// console.log("[最终sortlist]"+sortList);
				}
			}

			// solvedBox函数实现：点击下一项时，获取当前checked的值,之前存的文本doListState.txtVal, doListState.sortList是暂时存放分类的数组
			function solvedBox() {
				// 分类存库了  --存进二维数组
				const radio = document.querySelectorAll("[name='belong']");
				const tip = document.querySelector(".resultTip");
				let val = -1; // 作用是当没有选中项时，val为-1.
				for (let j = 0; j < 7; j++) {
					if (radio[j].checked) {
						val = radio[j].value * 1;
						break;
					}
				}
				let item = doListState.txtVal; // 获取显示的文本
				// console.log("【当前项目为第"+val+"个；【【当前的文本】】"+item);   // 为当前项或许选中的分类
				if (val >= 0 && item) {
					if (val === 1) {
						const inputDate = document.querySelector("[type='date']").value;
						item = item + " " + inputDate ;
					}
					let sortlist = doListState.sortList;
					let slist = sortlist[val]; // slist是 取出对应分类
					slist[slist.length] = item; // 这里是什么问题？添加新值
					sortlist[val] = slist;
					doListState.sortList = sortlist;
					// console.log("solvedBox分类存库，下一步就是保存数据了，目前sortbox的值"+sortlist); 
					saveIn("分类");
					localStorage.setItem("collectIndex", doListState.index); //不存会怎样？
					tip.innerText = "（处理成功!）";
					readBox();
				} else {
					tip.innerText = "（处理失败！当前没有事项或没有选择放置的位置）";
					let solvedAll = doListState.isSolvedAll;
					const pageDealWith = document.querySelectorAll(".doListNav .btn")[3];
					if (solvedAll === 0) {
						pageDealWith.classList.add("news");
						pageDealWith.innerText = "需要处理";
					} else {
						pageDealWith.classList.remove("news");
						pageDealWith.innerText = "事件统筹";
					}
				}
			}


			function addToDoList() {
				const val = doListState.txtVal;

			}

			function saveIn(giveaway = "收集") { // 存库
				const tip = document.getElementsByClassName("wrongTip")[0];
				if (giveaway === "分类") {
					// 事项的划分
					const sortlist = doListState.sortList;
					const nsort = [];
					for (let a = 0; a < 7; a++) {
						let newlist = sortlist[a]; // 获取某个分类的数组
            if(newlist.length>1){
              nsort.push(newlist.join("$")); // 分类内容用$拼接起来，放在nosort数组中
            }else{
              nsort.push(newlist[0]);
            }
					}
					const gwStr = nsort.join("~");
					// console.log(nsort,gwStr);
					if (localStorage) {
						localStorage.setItem("collectSortBox", gwStr);
						console.log("readsortbox前的数据"+gwStr);
						readSortBox();
					} else {
						tip.innerText = "！该浏览器不支持localStorage本地缓存功能，无法存库.";
					}
				} else {
					// 添加式库collectBox($分隔符，)  覆盖式库collectBoxNew
					// notFirstSave collectIndex solvedAll  分类库collectSortBox（先~后$划分）
					// （lastDaka saveData 打卡数据）
					//  点击收集保存不应该改变index，除非是新处理的时候。
					const list = doListState.list; // 获取当前列表栏目
					let str = list.join("$"); // 用$拼凑成字符串
					if (localStorage) {
						if (doListState.newListStr === str) {
							tip.innerText = "（请不要调皮收集两个一模一样的清单哦~）";
						} else {
							doListState.newListStr = str;
							localStorage.setItem("collectBoxNew", str); // 把当前列表栏目存进新加项内
							if (localStorage.getItem("collectBox")) { // 若是有旧的收集箱内容的话，则进行拼接，即收集箱新数据的追加
								let oldStr = localStorage.getItem("collectBox").toString();
								str = oldStr + "$" + str;
							}
							localStorage.setItem("collectBox", str);
							// console.log(doListState.firstSave);
							if (doListState.firstSave === 1) { // 未处理分类事项及
								console.log("第一次存数据，把数据显示出来，用readbox");
								localStorage.setItem("notFirstSave", "yes");
								readBox(); // 这个只能在无数据的时候执行一次。
							}

							if (doListState.continueSort === false) { //// 之前处理完了之后再次存事件进收集箱时
								// console.log("处理完了之后再次存事件进收集箱时");
								// 记录好当前的index值。
								doListState.continueSort = true;
								let index = doListState.index; // 获取当前的索引值
								localStorage.setItem("collectIndex", index); // 
								doListState.isSolvedAll = 0;
								localStorage.setItem("solvedAll", "0");
								// localStorage.setItem("collectIndex",index); 
								readBox(); // 去一下内存的index
							}

							// let index = doListState.index; // 获取当前的索引值
							// localStorage.setItem("collectIndex",index);  // 索引值的保存，初次保存的是-1
							// 显示事件统筹 
							const show = doListState.show; // 获取当前显示的页part
							const shows = document.querySelectorAll(".part");
							shows[show].style.display = "none";
							shows[3].style.display = "block";
							doListState.show = 3;

							tip.innerText = "(成功存入收集箱，请在右边进行事件统筹)";
						}

					} else {
						tip.innerText = "!该浏览器不支持localStorage本地缓存功能，无法存库";
					}

				}

			}


			function clearData() {
				const list = ["collectIndex", "collectBox", "collectBoxNew", "collectSortBox", "solvedAll", "notFirstSave"];
				for (let i = 0; i < list.length; i++) {
					localStorage.removeItem(list[i]);
				}
			}

			function showListData(list, num) { // 渲染列表
				let real = [];
				if (num === 1) {
					list.map((item) => {
						let li = '<li><label><input type="checkbox"/><span class="cbox"></span><b onclick="checkIt(event)">' + item +
							'</b></label><button onclick="handleDelete(event)">×</button></li>';
						real.push(li);
					});
					let realStr = real.join("");
					const listItem = document.querySelector(".lists");
					listItem.innerHTML = realStr;
				} else if (num === 2) {
					list.map((item) => {
						let li = '<li>' + item + '</li>';
						real.push(li);
					});
					let realStr = real.join("");
					const slideList = document.getElementsByClassName("listContent")[0];
					slideList.innerHTML = realStr;
				}

			}

			function getChannel(nodes, shows = "undefined") {
				if (shows === "undefined") {
					const slides = document.querySelectorAll(".slide");
					nodes = slides;
				}
				for (let part = 0; part < nodes.length; part++) {
					let indexOfPart = part;
					nodes[part].onclick = function() {
						// console.log(indexOfPart);
						if (shows === "undefined") { // 第indexOfPart个slide
							const show = doListState.inshow;
							slides[indexOfPart].classList.add("choose");
							slides[show].classList.remove("choose");
							// 读取数据
              let list = doListState.sortList[indexOfPart];
							if (list.length) {
								showListData(list, 2)
							} else {
								const slideList = document.getElementsByClassName("listContent")[0];
								slideList.innerText = "该项无数据";
							}
							doListState.inshow = indexOfPart;

						} else {
							const show = doListState.show;
							shows[show].style.display = "none";
							shows[indexOfPart].style.display = "block";
							doListState.show = indexOfPart;
						}
					};
				}
			}

			function handleInput(event) { // 输入值发生改变
				let target = event.target || window.event.srcElement; //兼容写法
				console.log(target.tagName);  //得到的事大写的tagName 
				if (target.tagName && target.tagName.toLowerCase() === "textarea") {
					// console.log("正常输出");
					doListState.vals = event.target.value;
				} else {
					doListState.val = event.target.value;
				}

			}

			function handleEnter(event) {
				let keyCode = event.keyCode || event.which;
				//console.log(keyCode);  //enter对应的值是13
				if (keyCode === 13) {
					handleAdd();
					// console.log("触发了enter");
				}
			}

			function handleAdd() {
				// console.log("触发了add");
				let {
					val,
					vals,
					list
				} = doListState;
				val = val.trim();
				vals = vals.trim();

        let newList = [];
				if (val !== "" || vals !== "") { // 输入框有值时：
					const ul = document.getElementsByClassName("todoList")[0];
					let has = ul.classList.contains("card");
					if (!has) {
						ul.classList.add("card");
					}
					if (val !== "") {
						list.push(val);
            newList.push(val);
						document.getElementsByClassName("smInput")[0].value = '';
					} else if (vals !== "") {
            if(/\*+/.test(vals)){
              let lis = vals.split("*");
              list = list.concat(lis);
              newList = lis;
            }else{
              list.push(vals);
              newList.push(vals);
            }
						document.getElementsByClassName("textarea")[0].value = '';
					}

					if (list.length >= 1) {
						const tip = document.getElementsByClassName("tips")[0];
						tip.style.display = "block";
					}
					const tip = document.getElementsByClassName("wrongTip")[0];
					tip.innerText = "";

					doListState.list = list;
					doListState.val = ''; // 清空输入框
					doListState.vals = ''; // 清空输入框
					for(let item=0;item<newList.length;item++){
            let li = document.createElement("li");
            li.innerHTML = '<label><input type="checkbox"/><span class="cbox"></span><b onclick="checkIt(event)">' + newList[item] +
            	'</b></label><button onclick="handleDelete(event)">×</button>';
            let listItem = document.querySelector(".lists");
            listItem.appendChild(li);
          }
					
					const num = document.querySelector(".tips b");
					num.innerText = list.length; // 显示当前的项目数
				}
			}

			function checkIt(event) {
				// event.stopPropagation(); // IE则是使用e.cancelBubble = true
				// event.cancelBubble = true;
				const item = event.target;
				if (item.classList.contains("finish")) {
					item.classList.remove("finish");
				} else {
					item.classList.add("finish");
				}
			}

			function handleDelete(e) { // 单项删除,这里的index用值比对的方式
				const con = e.target.parentNode.querySelector("b").innerText;
				let list = doListState.list;
				const index = list.lastIndexOf(con);
				console.log(con, index);
				list.splice(index, 1);
				// splice有增有减，返回删除值，作用在原数组。

				let listItem = document.querySelector(".lists");
				listItem.removeChild(e.target.parentNode);
				if (list.length === 0) {
					const ul = document.getElementsByClassName("todoList")[0];
					ul.classList.remove("card");
					const tip = document.getElementsByClassName("tips")[0];
					tip.style.display = "none";
				}
				doListState.list = list;
				const num = document.querySelector(".tips b");
				num.innerText = list.length; // 显示当前的项目数
			}
		</script>


		<script>
			// 评论区数据
			const commentsData = [{
					id: "us3444567800000023",
					username: "超级酷的人",
					comment: "干实事，能做的就先动手，不能做的先动脑。",
					attentionNum: 90,
					answerList: [
						["us2224567800000013", "树子", "这世界太浮躁，多干实事多份踏实。", 55],
						["us1244567800000023", "王也", "no zuo no die，但 no zuo no huo.", 55],
						["us3334567800000023", "梦一场", "一起学前端啊，Q群417911729", 12]
					]
				},

				{
					id: "us2222567800005023",
					username: "天涯浪人",
					comment: "今天又是奔波的一天。",
					attentionNum: 90,
					answerList: [
						["us6666567800000027", "窗前", "可不是嘛？", 5],
						["us7754567800000093", "天真以为", "何以解忧，唯有996，哈哈哈。", 12]
					]
				},
				{
					id: "us1887567800001023",
					username: "这个人不傻",
					comment: "吾日三省吾身，学否，笑否，获否。",
					attentionNum: 66,
					answerList: [
						["us3414517800000083", "俗家弟子", "嗯~书到用时方恨少，多实践下总会看到不足。", 5],
						["us5644417800000003", "天亮了", "但凡做到了也不会次次提醒自己，老弟继续加油！", 2]
					]
				}

			];
			
			showHotlink(); // 热链数据加载
			
      document.getElementById("addLinkBtn").onclick = addlinkFun;
			document.getElementById("hotLinkBtn").onclick = addlinkFun;
      function addlinkFun(){
        let oInput = null;
        const odiscussArea =  document.getElementsByClassName("discussArea")[0];
        if(odiscussArea.style.display==="block"){
          oInput = document.getElementById("disWords");
        }else{
          oInput = document.getElementById("noteWords") ;
        }
				 
        console.log(oInput);
				let val = oInput.value.trim();
        let regex = /http/;
				if(val && regex.test(val)){
					const oTip = document.getElementsByClassName("wordsCanIn")[0];
					if(localStorage.getItem("hotlink")){
						let data = localStorage.getItem("hotlink");
						localStorage.setItem("hotlink",data+"^"+val);
					}else{
						localStorage.setItem("hotlink",val);
					}
					showHotlink();
					oTip.innerText = "成功写入热键";
				}else{
          let temp = val || '资源';
					oInput.value = "<a href='网址' target='_blank' rel='noopener' >" + temp + "</a>";
				}
			}
			
			const ocustomizeLink = document.getElementsByClassName("customizeLink")[0];
			function showHotlink(){
				if(localStorage.getItem("hotlink")){
					let data = localStorage.getItem("hotlink");
					let list = data.split("^");
					let str = '';
					
					for (let i = 0; i < list.length; i++) {
						str += list[i];
					}
					str += "<a title='清空所有自定义的' onclick='clearHotlink()'>清</a>";
					ocustomizeLink.innerHTML = str;
				}
			}
			
			function clearHotlink(){
				localStorage.setItem('hotlink','');
				ocustomizeLink.innerHTML = "（自定义热链区）";
			}

			// 数据的加载【请设置懒加载】
			const existList = document.getElementById("existList");
			for (let item of commentsData) {
				let oli = document.createElement("li");
				let odts = [];
				let content = '<div class="quesFront" data-id=' + item.id +
					' ><img src="images/sentence/0.jpg" alt="提问者用户头像" /><h4>' +
					item.username + ': ' + item.comment + '</h4><span class="attentionBtn" data-id=' + item.id +
					' data-click=0 data-type="atten" data-comment=' +
					item.attentionNum + '>关注：' + item.attentionNum + '</span><b class="commentBtn" data-id=' + item.id +
					' >添加评论</b></div>';
				// 各个回复格式化 封装：传入评论数
				for (let j = 0; j < item.answerList.length; j++) {
					let comment =
						'<dt class="answerItem"><img src="images/sentence/1.jpg" alt="回答者用户头像" /><div class="comment"><p>用户： ' +
						item.answerList[j][1] + '</p>' + item.answerList[j][2] +
						'</div><div class="praise"><span class="attentionBtn" data-id=' +
						item.answerList[j][0] + ' data-click=0 data-type="praise" data-comment=' + item.answerList[j][3] +
						'>赞</span><b class="praiseNumber">' +
						item.answerList[j][3] + '</b></div></dt>';
					odts.push(comment);
				}
				let odtList = odts.join(" ");
				let allComment = content + '<dl class="answerList ' + item.id + ' " >' + odtList + '</dl>';
				oli.innerHTML = allComment;
				existList.appendChild(oli);

			}
			// window.localStorage.removeItem('discussData');
			// window.localStorage.removeItem('praiseData');

			noteOn(); // 定义了变量forNote
		</script>

		<script>
			// 每天打卡的实现
			var everyDay = true;
			var dakaData = {};
			var daysBtn =  document.querySelectorAll(".dataDays"); // 天数显示元素
			var dakaDays = 0; // 总打卡天数
      everyDayDaka();
			function everyDayDaka() {
				// 1.每天只能点击一次 进行数据储存
				// 2.数据显示，存的是对象的字符串
        var statusBtn =  document.querySelector(".status");  // 未与已打卡的显示文本
				var oulCheck = document.getElementsByClassName("dayCheck")[0];
				// var odate = new Date(); //这时间获取的是本地的？
				// var nowDate = odate.getFullYear() + "/" + (odate.getMonth()+1) + "/" + odate.getDate();
				if (window.localStorage) {
					if (localStorage.saveData) {
						var dataDaka = localStorage.getItem("saveData");
					  dakaData = JSON.parse(dataDaka);
						var lastSave = localStorage.getItem("lastDaka");
						if (lastSave !== nowDate) {
							console.log(lastSave,nowDate);
							everyDay = true; // 未打卡
						} else {
							everyDay = false; // 已打卡
							console.log(lastSave,nowDate);
              statusBtn.style.backgroundColor = "#FF0099";
              statusBtn.innerText = "已";
						}
					} else {
						console.log("第一次初始化，数据还未存入浏览器中。");
						var dakaData = {
							"HTML": 1,
							"CSS": 0,
							"JavaScript": 2,
							"Git": 1,
							"Vue": 3,
							"Weex": 1
						}
						everyDay = true;
					}
					for (let key in dakaData) { // 初始化表
						let oli = document.createElement("li");
						oli.innerHTML = "<span>" + key + "</span><span>" + dakaData[key] + "</span><b>打卡</b><i>删除</i>";
						oulCheck.append(oli);
						dakaDays = dakaDays + (dakaData[key] * 1);
					}
					daysBtn[0].innerText = dakaDays;
					daysBtn[1].innerText = dakaDays;
				} else {
					console.log("该浏览器不支持localStorage本地存储功能。");
				}

				
				function localSave(obj, name) {
					var s = JSON.stringify(obj);
					localStorage.setItem(name, s);
				}
        paint();
				function paint(){
					// 绘图
					var canvas=document.getElementById("myCanvas");
					var bi=canvas.getContext("2d");
					bi.lineWidth = 2;
					bi.strokeStyle = "white";
					// 坐标轴
					bi.moveTo(46, 14);
					bi.lineTo(50, 10);
					bi.lineTo(54, 14);
					bi.stroke();
					bi.moveTo(50, 10);
					bi.lineTo(50, 214);
					bi.lineTo(536, 214);
					bi.stroke();
					bi.moveTo(532, 210);
					bi.lineTo(536, 214);
					bi.lineTo(532, 218);
					bi.stroke();
					// bi.fillRect(0,0,568,260);
					bi.fillStyle="#2a252c";
					bi.fillRect(52,16,478,196);
								
					var column = document.querySelectorAll(".chart .col")[0];
					var row = document.querySelectorAll(".chart .row")[0];
					var {dakaDaylength,maxDays} =  showDays(); // 打卡最大天数
				
					var colheight = Math.ceil(180/maxDays); // 每一格高度：根据最大值和固定高度180px分配坐标点
					var rowwidth = Math.round(426/dakaDaylength);// 宽度
					var originX = 52;
					for (let key in dakaData) {
						// 绘图部分 (52,16,478,196);
						bi.fillStyle="#ab8aa6";
						let y = colheight*dakaData[key];
						let x = originX + rowwidth-5;
						originY = 212 - y;
						bi.fillRect(originX,originY,rowwidth-5,y);
						bi.fillStyle="#FFFFFF";
						bi.font="14px Arial";
						bi.textAlign = "center";
						bi.fillText(key,originX+rowwidth/2,236,rowwidth);
						originX+=rowwidth;
						// let ospan = document.createElement("span");
						// ospan.innerText = key;
						// ospan.style.width = rowwidth - 5 + 'px';
						// ospan.title = key;
						// row.appendChild(ospan);
					} 
					for (let i = maxDays; i >=0; i--) {
						bi.fillStyle="#FFFFFF";
						bi.fillText(i,36,216-i*colheight,40);
						// let ospan =  document.createElement("span");
						// ospan.innerText = i;
						// ospan.style.height = colheight + 'px';
						// column.appendChild(ospan);
					}
					bi.fillText("天数",20,16);
					bi.fillText("技术",540,240);
				}
				
				function showDays(){
					var dakaDaylength = 0;
					var maxDays = 0;
					if(!everyDay){
						statusBtn.innerText = "已";
						statusBtn.style.backgroundColor = "#FF0099";
					}
					for (let key in dakaData) {
						if(dakaData[key]>maxDays){
							maxDays = dakaData[key];
						}
						dakaDaylength++;
					}
					return {dakaDaylength,maxDays};
				}

			
			
			
				// btnAchieve实现的是打卡和删除按钮的功能
				function btnAchieve() {
					var obDaka = document.querySelectorAll(".dayCheck b");
					var obDel = document.querySelectorAll(".dayCheck i");
					for (let i = 0; i < obDaka.length; i++) {
						obDaka[i].onclick = function(e) {
							if (everyDay) {
								var keyLi = e.target.parentNode.firstChild.innerText;
								var newNum = dakaData[keyLi] + 1;
								dakaData[keyLi] = newNum;
								everyDay = false;
								e.target.previousElementSibling.innerText = newNum;
								dakaDays++;
								daysBtn[0].innerText = dakaDays;
								daysBtn[1].innerText = dakaDays;
								localSave(dakaData, "saveData");
								localStorage.setItem("lastDaka", nowDate);
								paint();
							}
						};
						obDel[i].onclick = function(e) {
							var keyLi = e.target.parentNode.firstChild.innerText;
							var delVal = window.confirm("是否删除项目" + keyLi);
							if (delVal) {
								e.target.parentNode.remove();
								dakaDays = dakaDays - dakaData[keyLi];
								console.log(dakaDays,dakaData[keyLi]);
								daysBtn[0].innerText = dakaDays;
								daysBtn[1].innerText = dakaDays;
								delete dakaData[keyLi]; // 注意不能用.来获取属性
								localSave(dakaData, "saveData");
							}
						};
					}
				}

				btnAchieve();
				var addBtn = document.getElementsByClassName("addItemBtn")[0];
				addBtn.onclick = function() {
					var oval = document.getElementsByClassName("writeIn")[0];
					var val = oval.value.trim();
					var valList = [];
					if (val !== "") {
						if(/,/.test(val)){
							valList = val.split(',');
							// console.log(valList);
						}else{
							valList[0] = val;
						}
						for(var item = 0; item < valList.length; item++){
							let oli = document.createElement("li");
							var addItem = valList[item];
							oli.innerHTML = "<span>" + addItem + "</span><span>0</span><b>打卡</b><i>删除</i>";
							oulCheck.append(oli);
							dakaData[addItem] = 0;
						}
						// console.log(dakaData);
						oval.value = "";
						localSave(dakaData, "saveData");
						btnAchieve();
					}
					
				}
			
			
			}
			// localStorage.removeItem("lastDaka");
			// localStorage.removeItem("saveData");
			// localStorage.removeItem("collectSortBox");
      
		</script>
	
  </body>
</html>
